// import {ajax_tool, changObj} from './common.js';
import {verifyCode, sessionRecord} from './request.js';


let sessionList = document.querySelector('.sessionList');
let quantity = document.querySelector('.quantity');
let mask = document.querySelector('.mask');
let off = document.querySelector('.off');
// 获取数据
search_data();
function search_data() {
    let obj = {};
    obj.phone = sessionStorage.getItem('phone');
    obj.name = sessionStorage.getItem('name');
    obj.token = sessionStorage.getItem('token');
    // 请求数据ajax，并渲染数据
    session_data(obj);
    console.log(obj);
}


// 请求数据ajax，并渲染数据
async function session_data(obj) {
    // ajax请求记录
    let data = await sessionRecord(obj);
    console.log(data);
    let result = data.result;
    // 创建一个数组来存储要渲染的数据
    let data_arr = [];

    // 下面是循环数据，筛选出有效的放进数组里
    result.forEach(function(item) {
        // 创建一个对象存储请求到的预约详情
        let obj1 = {};
        obj1.day_time = item.day_time;
        obj1.name = item.name;
        switch (item.show_id) {
            case "1": obj1.show_name = "09:00-12:00";  break;
            case "2": obj1.show_name = "12:00-14:30";  break;
            case "3": obj1.show_name = "14:30-17:00";
        }
        obj1.show_id = item.show_id;
        obj1.id = item.id;
        
        // 下面的是筛选有效的预约数据
        // 现在的时间
        let now_time = new Date().getTime();
        // 预约的日期时间
        let date = new Date(obj1.day_time).getTime();
        if (new Date(now_time).getMonth() == new Date(date).getMonth() && new Date(now_time).getDate() == new Date(date).getDate()) {
            if (new Date(now_time).getHours() < obj1.show_name.slice(6, 8)) {
                data_arr.push(obj1);
            }
        } else if(now_time < date) {
            data_arr.push(obj1);
        }
    });
    console.log(data_arr);

    // 调用渲染函数把数据渲染上页面
    renderer(data_arr);

    // 给每个记录添加查看二维码
    authCode(data_arr);
}

// 渲染函数
function renderer(data_arr) {
    // 先清空页面上之前的预约记录
    sessionList.innerHTML = "";
    // 创建一个变量来记录条数
    let num = 0;
    data_arr.forEach(function(item) {
        num++;
        sessionList.innerHTML += `
                        <li>
                            <span>姓名：${item.name}</span>
                            <span>日期：${item.day_time}</span>
                            <span>场次：${item.show_name}</span>
                            <span class="code" data-id="${item.id}">点击查看二维码</span>
                        </li>
                        `
        quantity.innerHTML = `共 ${num} 条`;
    })
}

// 添加查看二维码
function authCode(data_arr) {
    let codeList = document.querySelectorAll('.code');
    codeList.forEach(function(item) {
        item.addEventListener('click', function() {
            mask.className = 'mask show_mask';
            // 请求二维码并渲染
            code(data_arr, item.getAttribute('data-id'));
            async function code(obj, id) {
                let obj1 = {};
                obj1.token = sessionStorage.getItem('token');
                obj1.id = id;
                console.log(obj1);
                // ajax请求二维码
                let data = await verifyCode(obj1);
                mask.firstElementChild.firstElementChild.src = data.data.data;
            }
        })
    })
    console.log(codeList);
}

// 关闭二维码
mask.addEventListener('click', function() {
    mask.className = "mask hide_mask";
});

// 添加关闭点击事件
off.addEventListener('click', function() {
    location.href = '../index.html';
})